<template>
  <div class="box">
    <el-form :model="form">
      <el-form-item>
        <!-- 切换城市 -->
        <el-autocomplete
          class="inline-input"
          v-model="form.cityName"
          :fetch-suggestions="querySearch"
          placeholder="切换城市"
          :trigger-on-focus="false"
          @select="handleSelect"
        ></el-autocomplete>
      </el-form-item>

      <el-form-item>
        <!-- 入住日期&&离店日期 -->
        <el-date-picker
          v-model="time"
          type="daterange"
          range-separator="-"
          start-placeholder="入住日期"
          end-placeholder="离店日期"
          :picker-options="pickerOptions"
        ></el-date-picker>
      </el-form-item>
      <el-form-item>
        <!-- 人数未定 -->
        <el-popover placement="bottom" title="标题" width="400" trigger="click" content="aa">
          <el-input
            @focus="$refs.inputRef.blur()"
            placeholder="人数未定"
            suffix-icon="el-icon-user"
            ref="inputRef"
            slot="reference"
          ></el-input>
        </el-popover>
      </el-form-item>
      <el-form-item>
        <el-button @click="searchPrice" type="primary">查看价格</el-button>
      </el-form-item>
    </el-form>
    <div class="main">
      <div class="left">
        <!-- 区域 -->
        <div class="aera">
          <p>区域 :</p>
          <div class="itemBox" v-if="data[0]">
            <!-- text增加active类名就会heightauto -->
            <div :class="['text',{active:unfoldFlag}]">
              <div class="item" v-for="item in data[0].scenic" :key="item.id" >{{item.name}}</div>
            </div>
            <div class="unfold" >
              <!-- el-icon是向上 i默认向上 -->
              <i @click="unfoldFlag=!unfoldFlag" :class="[{'el-icon':!unfoldFlag},'el-icon-d-arrow-right']"></i>
              等{{data[0].scenic.length}}个区域
            </div>
          </div>
        </div>
        <!-- 均价 -->
        <div class="price">
          <span>
            均价
            <el-tooltip
              class="item"
              effect="dark"
              content="等级均价由平日价格计算得出，节假日价格会有上浮。"
              placement="top-start"
            >
              <div class="prompt">?</div>
            </el-tooltip>:
          </span>
          <span>
            <div class="numbox">
              <el-tooltip
                class="item"
                effect="dark"
                content="等级评定是针对房价，设施和服务等各方面水平的综合评估。"
                placement="bottom"
              >
                <template>
                  <div>
                    <i class="iconfont iconhuangguan"></i>
                    <i class="iconfont iconhuangguan"></i>
                    <i class="iconfont iconhuangguan"></i>
                  </div>
                </template>
              </el-tooltip>
            </div>￥332
          </span>
          <span>
            <div class="numbox">
              <el-tooltip
                class="item"
                effect="dark"
                content="等级评定是针对房价，设施和服务等各方面水平的综合评估。"
                placement="bottom"
              >
                <template>
                  <div>
                    <i class="iconfont iconhuangguan"></i>
                    <i class="iconfont iconhuangguan"></i>
                    <i class="iconfont iconhuangguan"></i>
                    <i class="iconfont iconhuangguan"></i>
                  </div>
                </template>
              </el-tooltip>
            </div>￥521
          </span>
          <span>
            <div class="numbox">
              <el-tooltip
                class="item"
                effect="dark"
                content="等级评定是针对房价，设施和服务等各方面水平的综合评估。"
                placement="bottom"
              >
                <template>
                  <div>
                    <i class="iconfont iconhuangguan"></i>
                    <i class="iconfont iconhuangguan"></i>
                    <i class="iconfont iconhuangguan"></i>
                    <i class="iconfont iconhuangguan"></i>
                    <i class="iconfont iconhuangguan"></i>
                  </div>
                </template>
              </el-tooltip>
            </div>￥768
          </span>
        </div>
      </div>
      <div class="right" id="container"></div>
    </div>
  </div>
</template>
<script>
export default {
  props:['data'],
  data() {
    return {
      unfoldFlag:false,
      time: [],
      enterTime: '',
      leftTime: '',
      form: {
        cityName: ''
      },
      pickerOptions: {
        disabledDate(time) {
          return time.getTime() < Date.now() - (24*60*60*1000)
        }
      }
    }
  },
  // 地图
  mounted() {
    window.onLoad = function() {
      var map = new AMap.Map('container')
    }
    var url =
      'https://webapi.amap.com/maps?v=1.4.15&key=ae6df95d005362e52795baf84692fa30&callback=onLoad'
    var jsapi = document.createElement('script')
    jsapi.charset = 'utf-8'
    jsapi.src = url
    document.head.appendChild(jsapi)
  },
  methods: {
    querySearch(cityName, cb) {
      this.$axios.get('/cities',{params:{name:cityName}}).then(res=>{
        const {data} = res
        const newData = data.data.map(x=>{
          return{
            ...x,
            value:x.name
          }
        })
        cb(newData)
      })
      
    },
    // 下拉城市点击触发
    handleSelect(item) {
      console.log('当前点击项')
      console.log(item)
    },
    searchPrice() {}
  },
  watch: {
    time(newTime) {
      this.enterTime = this.$moment(this.time[0]).format('YYYY-MM-DD')
      this.leftTime = this.$moment(this.time[1]).format('YYYY-MM-DD')
    },
    /* '$route.query.cityName':{
      handler(){
        
      },
      immediate:true
    } */
  },
  computed: {
    
  },
}
</script>
<style lang="less" scoped>
.box {
  margin-top: 20px;
}
/deep/ span {
  display: inline-block;
}
.el-form-item {
  display: inline-block;
  margin-right: 10px;
}
.main {
  display: flex;
  .left {
    font-size: 14px;
    flex: 1;
    // height: 260px;
    // background: chartreuse;
    color: #666666;
    .aera {
      display: flex;
      p {
        width: 50px;
        // background: chocolate;
      }
      .itemBox {
        flex: 1;
        font-size: 14px;
        padding-left: 20px;
        .text {
          display: flex;
          flex-wrap: wrap;
          // 两行的高度为38px
          height: 38px;
          overflow: hidden;
        }
        .active {
          height: auto;
        }
        .item {
          padding-right: 15px;
        }
        .unfold {
          i {
            cursor: pointer;
            transform: rotate(270deg);
            color: #f90;
          }
          .el-icon {
            transform: rotate(90deg);
          }
        }
      }
    }
    .price {
      margin-top: 20px;
      display: flex;
      font-size: 14px;
      span {
        &:first-child {
          margin-right: 15px !important;
        }
        margin-right: 30px;
        display: flex;
        .numbox {
          margin-right: 8px;
          .el-tooltip {
            display: flex;
            align-items: flex-end;
          }
        }
        i {
          color: #ff9900;
        }
      }
      .prompt {
        margin: 0 5px;
        width: 15px;
        height: 15px;
        line-height: 15px;
        background: #cccccc;
        border-radius: 50%;
        text-align: center;
        color: #fff;
        font-size: 10px;
      }
    }
  }
  .right {
    // margin-left: 30px;
    width: 420px;
    height: 260px;
    // background: burlywood;
  }
}
</style>